<template>
  <el-container class="layout-container">
    <!--  侧边栏  -->
    <el-aside width="200px" class="sidebar-container">
      <div class="sidebar-logo">
        <h3>管理系统</h3>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409eff"
        :collapse="isCollapse"
        router
      >
        <sidebar-item
          v-for="menu in menus"
          :key="menu.id"
          :menu="menu"
        />
      </el-menu>
    </el-aside>

    <!--  主体部分  -->
    <el-container>
      <!-- 头部 -->
      <el-header class="header-container">
        <div class="header-left">
          <el-button @click="toggleCollapse" link>
            <el-icon><Expand /></el-icon>
          </el-button>
        </div>
        <div class="header-right">
          <el-dropdown @command="handlerUserCommand">
            <span class="user-info">
              <el-avatar :size="30" icon="User" />
              <span class="username">{{ user?.full_name || user?.username }}</span>
            </span>
            <template #dropdown>
              <el-dropdown-item>
                <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
              </el-dropdown-item>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主要内容 -->
      <el-main class="main-container">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>


<script setup>
/*
  从Vue3的Composition API中导入三个核心函数
  ref: 创建一个响应式的引用对象，用于包装基本类型的值，使用它在模板中可以被追踪和更新
  computed: 创建一个计算属性，基于其他响应式数据动态计算并返回一个新的值。它会跟据依赖自动缓存和更新
  onMounted: 生命周期钩子函数，在组件挂载完后执行指定的操作
*/
import { ref, computed, onMounted } from 'vue'
// 从vue-router路由库中导入useRoute(访问当前路由信息)和useRouter(编程式导航和访问路由器实例)函数，用于获取当前路由信息
import { useRoute, useRouter } from 'vue-router'
// 从pinia状态管理库中导入storeToRefs函数，用于把store中的状态转换为响应式的引用refs,方便在组件中使用
import { storeToRefs } from 'pinia'
// 从../store路径导入useStore函数，用于在当前组件中使用Pinia状态管理库的功能
import {useAuthStore} from '../store'
// vue中，组件名会自动转换为短横线分隔形式，所以下面这个组件模板中使用时写作sidebar-item
import SidebarItem from '../components/layout/SidebarItem.vue'
import {permissionAPI} from "../api";

// 状态管理
const store = useAuthStore()
const { user, menus } = storeToRefs(store)

// 路由
const route = useRoute()
const router = useRouter()

// 状态
const isCollapse = ref(false)
const activeMenu = computed(() => route.path)

// 切换侧边栏折叠
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 处理用户命令
const handlerUserCommand = (command) => {
  if (command === 'logout') {
    store.logout()
    router.push('/login')
  } else if (command === 'profile') {
    // TODO: 跳转到个人中心
  }
}

// 加载菜单
const loadMenus = async () => {
  try {
    const response = await permissionAPI.getUserMenus()
    // 在axios的响应拦截器中处理了返回的数据是response.data所以这里直接使用response即可
    store.setMenus(response)
  } catch (error) {
    console.error('加载菜单失败:',error)
  }
}

// 组件挂载时加载菜单
onMounted(() => {
  loadMenus()
})
</script>

<style scoped>
  .layout-container{
    height: 100vh;
  }
  .sidebar-container{
    background-color: #304156;
    transition: width 0.28s;
  }
  .sidebar-logo {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #2b2f3a;
    color: #fff;
  }
  .header-container {
    background-color: #fff;
    border-bottom: 1px solid #d8dce5;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .username {
    margin-left: 10px;
  }
  .main-container {
    background-color: #f0f2f5;
    padding: 20px
  }
</style>
